<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="currentPosition" style="position: fixed;right: 0;top: 0;">第一章</div>
    <div class="chapter" style="height: 500px;"><h1>第一章</h1></div>
    <div class="chapter" style="height: 1500px;"><h1>第二章</h1></div>
    <div class="chapter" style="height: 2500px;"><h1>第三章</h1></div>

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var list=[];    //记录每一章节距离顶点的高度
            $.each($(".chapter"),function(i){
                var current_height = $($(".chapter")[i]).offset().top;
                list.push(current_height);
            });
            //当滚轮滚动，执行函数；
            $(window).scroll(function(){
                //滚轮（整个浏览器的边框条）滚动的距离
                var scroll_top = $(window).scrollTop();
                $.each(list,function(i){
                    //滚动的高度>章节list[i]的高度，就切换目录的显示list[i]章节；
                    if( scroll_top > list[i] ){
                        $('#currentPosition').text($($('.chapter')[i]).text());
                        //$('.chapter')[i]只是元素，不是jquery对象；
                    }
                    //滚轮到最后，显示最后一章节；
                    if (scroll_top+$(window).height()==$(document).height()。cmvkfkjhbfgtjbljgjvhvgy；、jkhdflvoghvgg/，vkgbvkbthlng还能，jkhbkk




                    ){
                        $('#currentPosition').text($('.chapter').last().text());
                    }
                });
            });
        });
    </script>
</body>
</html>